<script setup lang="ts">
import { useRoute } from "vue-router";
import { computed, onMounted } from "vue";

import useMedicineStore from "@/pinia/modules/medicineStore.ts";
import { storeToRefs } from "pinia";

const route = useRoute();

const medicineStore = useMedicineStore();

const { orderDetail } = storeToRefs(medicineStore);

const paySuccess = computed<boolean>(() => route.query.payResult === "true");

const orderId = computed(() => route.query.orderId as string);

onMounted(() => {
    medicineStore.fetchMedicineOrderDetail(orderId.value);
});


</script>

<template>
    <div class="order-pay-result-page">
        <nav-bar title="药品支付结果" />
        <div class="result" v-if="!paySuccess">
            <van-icon name="clear" />
            <p class="price">金额:{{ orderDetail.actualPayment }}</p>
            <p class="status">支付失败</p>
            <p class="tip">
                订单支付失败，可以点击查看订单继续支付，如有疑问联系客服~
            </p>
        </div>
        <div class="result" v-else>
            <van-icon name="checked" />
            <p class="price">金额:{{ orderDetail.actualPayment }}</p>
            <p class="status">支付成功</p>
            <p class="tip">订单支付成功，已通知药房尽快发出， 请耐心等待~</p>
        </div>
        <div class="btn">
            <van-button type="primary" :to="`/medicinePay/detail?id=${orderDetail.id}`">药品订单详情</van-button>
            <van-button :to="`/consult/chitchat?orderId=${orderDetail.roomId}`">返回诊室</van-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.order-pay-result-page {


    .result {
        display: flex;
        flex-direction: column;
        align-items: center;

        .van-icon {
            font-size: 75px;
            margin-top: 60px;
        }

        .van-icon-clear {
            color: var(--cp-price);
        }

        .van-icon-checked {
            color: var(--cp-primary);
        }

        .price {
            font-size: 22px;
            margin-top: 10px;
        }

        .status {
            color: var(--cp-text3);
            margin: 10px 0;
        }

        .tip {
            color: var(--cp-tip);
            width: 240px;
            text-align: center;
            margin-top: 20px;
        }
    }

    .btn {
        margin-top: 60px;
        display: flex;
        justify-content: center;

        .van-button--primary {
            margin-right: 20px;
        }
    }
}
</style>
